<template>
    <div class="props-container">
        <h1>我叫:{{name}}</h1>
        <h2>我今年:{{age}}岁</h2>
        <h3>我是:{{gender}}孩子</h3>
        <h4>我喜欢的食物是:</h4>
      <ul>
        <li v-for="(item,index) in foods" :key="index">{{item}}</li>
        <!-- <li>西兰花</li>
        <li>花菜</li>
        <li>西红柿</li> -->
        
      </ul>
    </div>
  </template>
  
  <script>
  export default {
      name:'PropsCom',
      
      props:["name","age","gender","foods"]
  }
  </script>
  
  <style >
  .props-container {
    border: 1px solid orange;
    width: 300px;
    background-color: yellowgreen;
    padding: 10px;
  }
  h1,
  h2,
  h3,
  h4 {
    margin: 0;
  }
  </style>